PouchDB দিয়ে একটি সম্পূর্ণ CRUD অ্যাপ্লিকেশন তৈরি করা

PouchDB একটি ক্লায়েন্ট-সাইড ডেটাবেস লাইব্রেরি যা আপনাকে ব্রাউজারে ডেটা সংরক্ষণ এবং পরিচালনা করার সুবিধা দেয়। এর সাহায্যে আপনি খুব সহজেই Create, Read, Update, এবং Delete (CRUD) অপারেশন সম্পাদন করতে পারবেন। এই টিউটোরিয়ালে, আমরা একটি React Native অ্যাপে PouchDB দিয়ে একটি সম্পূর্ণ CRUD অ্যাপ্লিকেশন তৈরি করব।

ধাপ ১: PouchDB ইনস্টল করা

প্রথমে, আপনার প্রজেক্টে PouchDB ইনস্টল করতে হবে। React Native প্রজেক্টে PouchDB ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install pouchdb-react-native

এটি ইনস্টল হওয়ার পর, pouchdb-react-native লাইব্রেরি ইমপোর্ট করুন:

import PouchDB from 'pouchdb-react-native';

ধাপ ২: ডেটাবেস তৈরি এবং কনফিগারেশন

PouchDB ব্যবহার করতে প্রথমে একটি ডেটাবেস তৈরি করতে হবে। এখানে একটি ডেটাবেস তৈরি করা হচ্ছে এবং ডেটাবেসের সাথে CRUD অপারেশন করা হবে।

// ডেটাবেস তৈরি
const db = new PouchDB('my_database');

ধাপ ৩: Create (ডকুমেন্ট তৈরি)

এখন, ডেটাবেসে নতুন ডকুমেন্ট যোগ করার জন্য put() ফাংশন ব্যবহার করা হবে:

// একটি ডকুমেন্ট তৈরি করা
const createDoc = async () => {
  const doc = {
    _id: '1',   // ডকুমেন্টের ইউনিক আইডি
    name: 'John Doe',
    age: 25,
  };

  try {
    const response = await db.put(doc);
    console.log('Document created:', response);
  } catch (err) {
    console.error('Error creating document:', err);
  }
};

এখানে, put() ফাংশনটি নতুন ডকুমেন্ট সন্নিবেশ করবে।

ধাপ ৪: Read (ডেটা পড়া)

PouchDB তে ডেটা পড়তে get() ফাংশন ব্যবহার করা হয়। নিচে একটি ডকুমেন্ট রিট্রিভ করার উদাহরণ দেওয়া হল:

// ডকুমেন্ট রিট্রিভ করা
const readDoc = async (docId) => {
  try {
    const doc = await db.get(docId);
    console.log('Document retrieved:', doc);
  } catch (err) {
    console.error('Error retrieving document:', err);
  }
};

এখানে, get() ফাংশনটি docId দিয়ে ডকুমেন্ট রিট্রিভ করবে।

ধাপ ৫: Update (ডেটা আপডেট)

PouchDB তে ডেটা আপডেট করতে put() ফাংশন ব্যবহার করা হয়, তবে আপডেট করার আগে ডকুমেন্টের _rev মানটি সংগ্রহ করা প্রয়োজন। নিচে একটি ডকুমেন্ট আপডেট করার উদাহরণ দেওয়া হল:

// ডকুমেন্ট আপডেট করা
const updateDoc = async () => {
  try {
    const doc = await db.get('1');  // প্রথমে ডকুমেন্টটি রিট্রিভ করা
    doc.age = 26;                    // ডেটা আপডেট করা
    const response = await db.put(doc);  // আপডেট করা ডকুমেন্টটি পুনরায় সেভ করা
    console.log('Document updated:', response);
  } catch (err) {
    console.error('Error updating document:', err);
  }
};

এখানে, আমরা প্রথমে ডকুমেন্টটি রিট্রিভ করেছি এবং তারপরে age ফিল্ড আপডেট করেছি।

ধাপ ৬: Delete (ডেটা মুছে ফেলা)

PouchDB তে ডেটা মুছে ফেলতে remove() ফাংশন ব্যবহার করা হয়, তবে মুছে ফেলার জন্য ডকুমেন্টের _rev মানটি প্রয়োজন। নিচে একটি ডকুমেন্ট মুছে ফেলার উদাহরণ দেওয়া হলো:

// ডকুমেন্ট মুছে ফেলা
const deleteDoc = async () => {
  try {
    const doc = await db.get('1');  // ডকুমেন্ট রিট্রিভ করা
    const response = await db.remove(doc);  // ডকুমেন্ট মুছে ফেলা
    console.log('Document deleted:', response);
  } catch (err) {
    console.error('Error deleting document:', err);
  }
};

এখানে, প্রথমে ডকুমেন্টটি রিট্রিভ করা হয়েছে এবং তারপর remove() ফাংশন দিয়ে সেটি মুছে ফেলা হয়েছে।

ধাপ ৭: React Native UI তে CRUD অপারেশন যুক্ত করা

এখন, আমরা React Native UI তে CRUD অপারেশনগুলো কার্যকরীভাবে যুক্ত করব। নিচে একটি উদাহরণ দেওয়া হলো যেখানে UI ব্যবহারকারীকে ডকুমেন্ট তৈরি, পড়া, আপডেট এবং মুছে ফেলার সুবিধা দেয়:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import PouchDB from 'pouchdb-react-native';

// ডেটাবেস তৈরি
const db = new PouchDB('my_database');

export default function App() {
  const [doc, setDoc] = useState(null);

  // ডকুমেন্ট তৈরি
  const handleCreate = async () => {
    const doc = {
      _id: '1',
      name: 'John Doe',
      age: 25,
    };
    await db.put(doc);
    console.log('Document created');
  };

  // ডকুমেন্ট পড়া
  const handleRead = async () => {
    const doc = await db.get('1');
    setDoc(doc);
  };

  // ডকুমেন্ট আপডেট
  const handleUpdate = async () => {
    const doc = await db.get('1');
    doc.age = 26;
    await db.put(doc);
    console.log('Document updated');
  };

  // ডকুমেন্ট মুছে ফেলা
  const handleDelete = async () => {
    const doc = await db.get('1');
    await db.remove(doc);
    console.log('Document deleted');
  };

  return (
    <View>
      <Button title="Create Document" onPress={handleCreate} />
      <Button title="Read Document" onPress={handleRead} />
      <Button title="Update Document" onPress={handleUpdate} />
      <Button title="Delete Document" onPress={handleDelete} />

      {doc && (
        <Text>
          Document: {doc.name}, Age: {doc.age}
        </Text>
      )}
    </View>
  );
}

এখানে, আমরা Button ব্যবহার করে বিভিন্ন CRUD অপারেশন পরিচালনা করেছি এবং ডকুমেন্টের তথ্য UI তে প্রদর্শন করেছি।

সারাংশ

এই টিউটোরিয়ালে, আমরা দেখেছি কিভাবে PouchDB ব্যবহার করে React Native অ্যাপে একটি সম্পূর্ণ CRUD অ্যাপ্লিকেশন তৈরি করা যায়। PouchDB এর সাহায্যে আপনি ক্লায়েন্ট-সাইড ডেটাবেসে Create, Read, Update, এবং Delete অপারেশনগুলো খুব সহজে সম্পাদন করতে পারবেন। PouchDB এর put(), get(), remove() এবং find() ফাংশনগুলি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে কার্যকরীভাবে ডেটা ম্যানিপুলেট করতে পারেন।